import React, { useEffect, useState } from "react";
import { Button, Form, Space } from "antd";
import { orderCalcOrder } from "../../services";
import { useDebounce } from "@/hooks";
import PlaceOrderPreview from "../../modals/PlaceOrderPreview";
import { orderTypes } from "@/constants/types";

const OrderFeePreview = ({productInfoForm, goodsInfoForm, otherInfoForm, feeInfoForm, isPreOrderConvertOrder, onSave, onSubmit, loading, getParams}: any) => {
  const [fee, setFee] = useState<any>({});
  const [previewVisible, setPreviewVisible] = useState(false);
  const [currentRow, setCurrentRow] = useState<orderTypes | null>(null);


  // 计算总费用的参数 
  const quoteId = Form.useWatch('quoteId', productInfoForm);

  const totalWeight = Form.useWatch('totalWeight', goodsInfoForm);
  const totalVol = Form.useWatch('totalVol', goodsInfoForm);

  const billMethod = Form.useWatch('billMethod', otherInfoForm);
  const taxFlag = Form.useWatch('taxFlag', otherInfoForm);
  const insuranceFlag = Form.useWatch('insuranceFlag', otherInfoForm);
  const declaredCargoValue = Form.useWatch('declaredCargoValue', otherInfoForm);

  const price = Form.useWatch('price', feeInfoForm);
  const pickupFee = Form.useWatch('pickupFee', feeInfoForm);
  const cargoCheckFee = Form.useWatch('cargoCheckFee', feeInfoForm);
  const additionalFee = Form.useWatch('additionalFee', feeInfoForm);
  const couponAmount = Form.useWatch('couponAmount', feeInfoForm);
  const taxFee = Form.useWatch('taxFee', feeInfoForm);
  const bgFee = Form.useWatch('bgFee', feeInfoForm);

  const setFeeToForm = (feeData: any) => {
    if (!feeData) {
      return ;
    } 
    if (isPreOrderConvertOrder) {
      feeInfoForm.setFieldsValue({
        feeVol: feeData?.feeVol || undefined,
        feeWeight: feeData.feeWeight || undefined,
        price: feeData?.price,
        insuranceFee: feeData?.insuranceFee,
      });
    } else {
      feeInfoForm.setFieldsValue({
        // price: price || feeData?.price,
        feeVol: feeData?.feeVol || undefined,
        feeWeight: feeData.feeWeight || undefined,
        insuranceFee: feeData?.insuranceFee,
        systemPrice: feeData?.price
      });
    }
  } 
  const searchFee = async (params: any) => {
    const res = await orderCalcOrder(params);
    if (res?.code === '0' && res?.data) {
      setFee(res?.data);
      setFeeToForm(res?.data);
    }
  }

  const searchFeeDn = useDebounce(searchFee, 1000);


  const previewProps = {
    title: '订单预览',
    visible: previewVisible,
    currentRow,
    feeData: fee,
    onCancel: () => {
      setPreviewVisible(false);
      setCurrentRow(null);
    }
  }

  const handlePreview = () => {
    setCurrentRow(getParams());
    setPreviewVisible(true);
  }

  useEffect(() => {
    if (!quoteId || !totalWeight || !totalVol || !billMethod || (!isPreOrderConvertOrder && !price)) {
      return ;
    }
    searchFeeDn({quoteId, price, totalWeight, totalVol, billMethod, taxFlag, taxFee: taxFee|| 0, bgFee: bgFee || 0, pickupFee, cargoCheckFee: cargoCheckFee || 0, additionalFee: additionalFee || 0, insuranceFlag, declaredCargoValue: declaredCargoValue || 0, couponAmount: couponAmount || 0});
  }, [quoteId, totalWeight, totalVol, billMethod, taxFlag, taxFee, bgFee, price, pickupFee, cargoCheckFee, additionalFee, insuranceFlag, declaredCargoValue, couponAmount])

  return (
    <>
      <div className="place-order-footer">
        <div style={{display: 'flex', justifyContent:'flex-start', alignItems: 'center'}}>
          <div style={{fontWeight: 'bold', fontSize: '16px'}}>预估总费用/元：</div>
          <div style={{color: 'orange', fontSize: '24px'}}>{fee?.totalAmount || ''}</div>
        </div>
        <Space>
          <Button type="default" onClick={handlePreview}>预览</Button>
          <Button type="default" onClick={onSave} loading={loading}>暂存草稿</Button>
          <Button type="primary" onClick={onSubmit} loading={loading}>提交订单</Button>
        </Space>
      </div>
      {previewVisible && <PlaceOrderPreview {...previewProps} />}
    </>
  );
}
export default OrderFeePreview;